<template>
    <div class="content">
        <div class="md-layout">
            <div class="md-layout-item">
                <md-card>
                    <md-card-header data-background-color="green">
                        <h4 class="title">Material Dashboard Heading</h4>
                        <p class="category">Created using Roboto Font Family</p>
                    </md-card-header>
                    <md-card-content>
                        <div class="md-layout">
                            <div class="md-layout-item md-medium-size-100 md-xsmall-size-100 md-size-50">
                                <md-datepicker v-model="sTime" md-immediately>
                                    <label>Select start date</label>
                                </md-datepicker>
                            </div>
                            <div class="md-layout-item md-medium-size-100 md-xsmall-size-100 md-size-50">
                                <md-datepicker v-model="eTime" md-immediately>
                                    <label>Select end date</label>
                                </md-datepicker>
                            </div>
                            <div class="md-layout-item">
                                <md-autocomplete class="search" v-model="subject" :md-options="subjects">
                                    <label>Search...</label>
                                </md-autocomplete>
                            </div>
                            <div class="md-layout-item">
                                <md-field>
                                    <label>column</label>
                                    <md-select v-model="column" name="column" id="column">
                                        <md-option v-for="item in columns" :key="item.id" :value="item.v">{{ item.n }}
                                        </md-option>
                                    </md-select>
                                </md-field>
                            </div>
                            <div class="md-layout-item md-medium-size-100 md-xsmall-size-100 md-size-33 pull-right">
                                <md-button class="md-success md-round" v-on:click="say()" id="resetBt">Reset</md-button>
                            </div>
                        </div>
                        <chart-card
                                :chart-type="'trade'"
                                data-background-color="gray"
                                id="chart1">
                        </chart-card>
                    </md-card-content>
                </md-card>
            </div>
        </div>
    </div>
</template>

<script>
    import {
        ChartCard,
    } from "@/components";

    import axios from 'axios'
    import echarts from 'echarts'

    data:{

    }

    export default {
        components: {
            ChartCard, //todo figure out what is chart card
        },
        index: 1,
        name: "tradeData",
        data() {
            return {
                sTime: new Date('2010-1-1'),
                eTime: new Date('2010-2-1'),
                subject: [],
                subjects: [null],
                column: [],
                columns: [
                    {"v": "settlement_yesterday", "n": "昨日结算"},
                    {"v": "opening_today", "n": "今日开盘"},
                    {"v": "highest_price", "n": "最高价"},
                    {"v": "lowest_price", "n": "最低价"},
                    {"v": "closing_today", "n": "今日收盘"},
                    {"v": "settlement_today", "n": "今日结算"},
                    {"v": "up_and_down1", "n": "涨跌1"},
                    {"v": "up_and_down2", "n": "涨跌2"},
                    {"v": "volume", "n": "成交量"},
                    {"v": "empty_quantity", "n": "空盘量"},
                    {"v": "increase_or_decrease", "n": "增减量"},
                    {"v": "turn_over", "n": "成交额"},
                    {"v": "delivery_settlement_price", "n": "交割结算价"}
                ]
            }
        },
        mounted: function () {
            // 恢复数据
            this.$http.get(this.$get_trade_variety).then(res => {
                this.subjects = res.data.content.data;
            });
            this.column = this.$cookies.get('t_column');
            this.subject = this.$cookies.get('t_subject');
        },

        created: function () {

        },
        methods: {
            say: function () {

                this.$cookies.set('t_sTime', this.sTime.getFullYear() + '-' + (this.sTime.getMonth() + 1) + '-' + this.sTime.getDate());
                this.$cookies.set('t_eTime', this.eTime.getFullYear() + '-' + (this.eTime.getMonth() + 1) + '-' + this.eTime.getDate());
                this.$cookies.set('t_subject',  this.subject);
                this.$cookies.set('t_column', this.column);

                let chart = echarts.init(document.getElementById('chart1'));
                chart.showLoading();
                axios
                    .get(this.$get_trade_data, {
                        params: {
                            sTime: `${this.sTime.getFullYear() + '-' + (this.sTime.getMonth() + 1) + '-' + this.sTime.getDate()}`,
                            eTime: `${this.eTime.getFullYear() + '-' + (this.eTime.getMonth() + 1) + '-' + this.eTime.getDate()}`,
                            subject: `${this.subject}`,
                            column: `${this.column}`,
                        }
                    })
                    .then(function (response) {
                        console.log(response.data.content.category);
                        chart.setOption({
                            xAxis: {
                                data: response.data.content.category
                            },
                            yAxis: {
                                min: response.data.content.min,
                                type: 'value'
                            },
                            series: [{
                                name: response.data.content.column,
                                data: response.data.content.data,
                                label: {
                                    normal: {
                                        show: true,
                                        position: 'top'
                                    }
                                }
                            }]
                        });
                        chart.hideLoading();
                    })
            },
            // 暂时不用
            get_subjects: function () {
                axios
                    .get(this.$get_trade_variety, {})
                    .then(function (response) {
                        console.log(response.data.content.data);
                        this.subjects = response.data.content.data
                    })
            }
        }
    }


</script>

<style scoped>
    #chart1 {
        width: 1545px;
        height: 600px;
    }
</style>
